<script setup lang="ts">
defineProps({
  // 中文字
  name: {
    required: true,
    type: String,
  },
  // 英文字
  enName: {
    required: true,
    type: String,
  },
  // 是否包含菜单的箭头
  withArrow: {
    type: Boolean,
    default: () => false
  },
  // 箭头的朝向
  arrowOpen: {
    type: Boolean,
    default: () => false
  }
})
</script>
<template>
  <div class="arrow-modal">
    <slot/>
  </div>
  <div class="text">
    <div class="text-top">
      <span class="font-bold">{{ name }}</span>
      <span class="arrow" v-if="withArrow && arrowOpen">∨</span>
      <span class="arrow" v-if="withArrow && !arrowOpen">∧</span>
    </div>
    <div class="text-bottom">{{ enName }}</div>
  </div>
</template>
<style scoped lang="scss">
.arrow-modal {
  position: absolute;
  bottom: 5em;
  left: -3em;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.8em 1em;
  cursor: pointer;

  .text-top {
    font-size: 1.2em;
    font-weight: bold;

    .arrow {
      display: inline-block;
      font-size: 0.8em;
      margin-left: 0.4em;
      transform: scaleX(1.5);
      font-weight: bold;
    }

    .visibility {
      visibility: hidden;
    }
  }

  .text-bottom {
    transform: scale(0.5);
    margin-top: -0.2em;
    opacity: 0.6;
    font-weight: bold;
    text-transform: uppercase;
  }
}
</style>